<template>
    <div>
        <div class="accessory-result-page accessory-page" >
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="change();sortPrice(false)">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="show()">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show':showPrice}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" @click="checks(0)">All</a></dd>
              <dd>
                <a href="javascript:void(0)" @click="checks(1)">0 - 100</a>
              </dd>
              <dd>
                <a href="javascript:void(0)" @click="checks(2)">100 - 500</a>
              </dd>
              <dd>
                <a href="javascript:void(0)" @click="checks(3)">500 - 1000</a>
              </dd>
              <dd>
                <a href="javascript:void(0)" @click="checks(4)">1000 - 2000</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item,index) in list" :key="index">
                  <div class="pic">
                    <a href="#"><img v-lazy="require('../../assets/images/'+item.productImage)" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addToCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
              加载中...
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-show="showOverlay" @click="close()"></div>
    </div>
</template>
<script>

export default {
    name:'GoodList',
    data(){
        return{
            showPrice:false,
            showOverlay:false,
            url:'https://tvax2.sinaimg.cn/large/005BYqpggy1g2uicn1afsj31920u0wi6.jpg',
            list:[],
            page:1,
            sort:false,
            pageSize:8,
            busy:true,
            check:0,
            userId:'',
            userName:''
        }
    },
    methods:{
        change(){
      this.sort = !this.sort;
    },
    show(){
      this.showPrice = true;
      this.showOverlay = true;
    },
    close(){
      this.showPrice = false;
      this.showOverlay = false;
    },
    open(val) {
        this.$message(val);
    },
    sortPrice(flag){
      this.axios.defaults.withCredentials = true
      const param = {
        page:this.page,
        pageSize:this.pageSize,
        sort:this.sort?1:-1,
        check:this.check
      }
      //console.log(param);
      this.axios.get('http://127.0.0.1:3333/getGoodsSort',{params:param}).then((res)=>{
        console.log(res.data.status)
        if(res.data.status=='0'){
          if(flag){
            this.list = this.list.concat(res.data.result.list);
            if(res.data.result.count===0){
              this.busy = true;
              this.page = 1;
            }else{
              this.busy = false;
            }
          }else{
            this.list = res.data.result.list;
            this.busy = false
          }
          // console.log(res);
          // this.list = res.data.result.list;
        }else{
          this.list == [];
        }
      }).catch((err)=>{
        console.log(err)
      });
    },
    loadMore(){
      this.busy = true;
      setTimeout(()=>{
        this.page++;
        this.sortPrice(true)
      },500)
    },
    checks(index){
      this.check = index;
      this.page = 1;
      this.sortPrice(false);
    },
    addToCart(id){
      this.axios.defaults.withCredentials = true
      if(this.userId == '' || this.userName == ''){
        this.open('您还未登录');
      }
      this.axios.post('http://127.0.0.1:3333/goods/addCart',{productId:id}).then((data)=>{
        if(data.data.status == '0'){
          this.$store.commit('addCartNum',1);
          this.open('加入购物车成功');
        }
      })
    }
    },
    mounted(){
    this.axios.defaults.withCredentials = true
    //console.log(this.$refs.header.userId)
    this.axios.get('http://127.0.0.1:3333/list').then((res)=>{
    
      this.list = res.data.result.list;
    }).catch((err)=>{
      console.log(err);
    });
    this.axios.post('http://127.0.0.1:3333/getUserId').then((data)=>{
        if(data.data.status == '0'){
             //onsole.log(data);
            this.userName = data.data.result.userName;
            this.userId = data.data.result.userId;
        }
      })
   }
}
</script>
<style scoped>

</style>